<template>
  <div class="rank">
    <div class="rank-container">
      <div class="rank-main">

        <div class="song-main">
          <div class="song-header">
            <h4>
              歌曲列表 <em>{{ info.total + "首歌" }}</em>
            </h4>
            <span class="play-all"><i class="iconfont icon-audio-play"></i> 播放全部</span>
            <span :class="['collect', info.rankInfo.subscribed ? 'active' : '']"><i :class="[
              'iconfont',
              'icon-collect' + (info.rankInfo.subscribed ? '-active' : ''),
            ]"></i>
              {{ info.rankInfo.subscribed ? "已收藏" : "收藏" }}</span>
          </div>
          <template v-if="info.isLoading">
            <Loading />
          </template>
          <template v-else>
            <song-list :songList="info.songList"></song-list>
          </template>
        </div>
       
      </div>

    </div>
  </div>
</template>
  
<script setup>
import { getCurrentInstance, onMounted, reactive, watchEffect, ref, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import Loading from "@/components/Loading.vue";
import songList from "@/components/music/components/songList.vue";
import Playbar from '@/components/music/components/Playbar.vue'
import { musicList } from '@/api/music/music.ts'

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const currentTime = ref(0);

// 当前音频的播放时长
const setCurrentTime = (t) => {
  currentTime.value = t;
};

// 下发当前音频时间戳
provide('currentTime', currentTime);

const info = reactive({
  category: [], // 右侧分类导航列表
  isLoading: true,
  rankInfo: {},
  songList: [],
  total: 0,
  loading: true,
});



const getListDetail = async () => {
  info["isLoading"] = true;
  const res = await musicList()
  console.log(res)
  if (res.code !== 200) {
    return proxy.$msg.error("数据请求失败");
  }

 var privileges = [{
    "id": 2130316234,
    "fee": 8,
    "payed": 0,
    "realPayed": 0,
    "st": 0,
    "pl": 128000,
    "dl": 0,
    "sp": 7,
    "cp": 1,
    "subp": 1,
    "cs": false,
    "maxbr": 999000,
    "fl": 320000,
    "pc": null,
    "toast": false,
    "flag": 4,
    "paidBigBang": false,
    "preSell": false,
    "playMaxbr": 999000,
    "downloadMaxbr": 999000,
    "maxBrLevel": "hires",
    "playMaxBrLevel": "hires",
    "downloadMaxBrLevel": "hires",
    "plLevel": "standard",
    "dlLevel": "none",
    "flLevel": "exhigh",
    "rscl": null,
    "freeTrialPrivilege": {
      "resConsumable": false,
      "userConsumable": false,
      "listenType": null,
      "cannotListenReason": null,
      "playReason": null
    },
    "rightSource": 0,
    "chargeInfoList": [{
      "rate": 128000,
      "chargeUrl": null,
      "chargeMessage": null,
      "chargeType": 0
    },
    {
      "rate": 192000,
      "chargeUrl": null,
      "chargeMessage": null,
      "chargeType": 0
    },
    {
      "rate": 320000,
      "chargeUrl": null,
      "chargeMessage": null,
      "chargeType": 0
    },
    {
      "rate": 999000,
      "chargeUrl": null,
      "chargeMessage": null,
      "chargeType": 1
    },
    {
      "rate": 1999000,
      "chargeUrl": null,
      "chargeMessage": null,
      "chargeType": 1
    }
    ]
  }
  ]

  info["songList"] = proxy.$utils.formatSongs(
    res.rows,
    privileges
  );
  info["total"] = res.total;
  info["isLoading"] = false;
  info["loading"] = false;
};

onMounted(() => {
  getListDetail();
});


</script>
  
<style lang="less" scoped>
.rank-container {
  display: flex;
  padding: 35px 0 0 0;
}

.rank-main {
  flex: 1;
  padding-bottom: 45px;
}

.cover {
  display: flex;
  box-shadow: var(--t-modal-shadow);
  background: var(--box-background);
  border-radius: var(--border-radius);
}

.cover-img {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  overflow: hidden;
  flex-shrink: 0;

  .el-image {
    width: 100%;
    height: 100%;
  }
}

.cover-info {
  flex: 1;
  padding: 20px 20px 10px;
  font-size: 0;
  border-radius: var(--border-radius);

  .cover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cover-title {
    flex: 1;
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    color: var(--t-muted-color);

    span {
      display: inline-block;
      padding-left: 10px;
      font-weight: normal;
      line-height: 22px;
      font-size: 14px;
      font-weight: 300;
      color: var(--t-light-color);
    }
  }
}

.cover-author-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cover-author {
  display: flex;
  align-items: center;
  padding: 15px 0 5px;

  .cover-avatar {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    vertical-align: top;
    flex-shrink: 0;
  }

  .cover-name,
  .cover-date {
    display: inline-block;
    margin: 0 5px;
    font-size: 14px;
    font-weight: 300;
    color: var(--t-muted-color);
  }

  .cover-date {
    color: var(--t-light-color);
  }
}

.cover-playCount,
.cover-collect,
.cover-comment {
  display: inline-block;
  margin-right: 20px;
  line-height: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--t-light-color);

  i {
    vertical-align: top;
    color: var(--t-light-color);
  }
}

.cover-desc {
  position: relative;

  .cover-desc-title {
    margin: 20px 0 5px;
    line-height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--t-light-color);
  }

  .cover-desc-text {
    line-height: 22px;
    font-size: 14px;
    color: var(--t-light-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font-weight: 300;
  }
}

.song-main {
  position: relative;
  // padding: 0 20px;
  margin-top: 25px;
  // background: var(--box-background);
  border-radius: var(--border-radius);
  // box-shadow: var(--t-modal-shadow);
}

.song-header {
  display: flex;
  padding: 20px 0 10px;

  h4 {
    flex: 1;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--t-muted-color);

    em {
      display: inline-block;
      padding-left: 10px;
      font-size: 12px;
      line-height: 12px;
      font-style: normal;
      font-weight: 300;
      color: var(--t-light-color);
      vertical-align: baseline;
    }
  }

  span {
    display: flex;
    line-height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    padding: 7px 20px 7px 16px;
    cursor: pointer;
    margin: 0 0 0 15px;
    transition: all 0.4s;
    background: var(--btn-background);
    color: var(--t-light-color);

    i {
      margin-right: 5px;
      color: var(--t-light-color);
    }
  }

  .play-all {
    color: var(--white-color);
    background: var(--t-highlight-color);

    i {
      color: var(--white-color);
    }
  }

  .collect.active,
  .collect.active i {
    color: var(--color-text-height);
  }
}

.rank-aside {
  width: @sideWidth;
  padding-bottom: 25px;
  flex-shrink: 0;
  padding-left: @paddingW;
}

.rank-aside-nav {
  font-size: 0;

  .rank-aside-title {
    font-size: 16px;
    line-height: 16px;
    padding: 0 10px 20px;
    color: var(--t-text-color);

    &::before {
      display: inline-block;
      content: "";
      width: 3px;
      height: 16px;
      margin-right: 5px;
      background: var(--t-muted-color);
      vertical-align: top;
      border-radius: var(--border-radius);
    }
  }

  .rank-aside-main {
    display: flex;
    flex-wrap: wrap;
  }

  .rank-aside-item {
    display: flex;
    width: calc(50% - 20px);
    padding: 10px;
    cursor: pointer;

    &.active {
      background: var(--t-highlight-color);
      border-radius: var(--border-radius);

      .item-title,
      .item-time {
        color: var(--white-color);
      }
    }
  }

  .item-img {
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: var(--border-radius);
  }

  .item-info {
    width: calc(100% - 50px);
    padding-left: 5px;
  }

  .item-title {
    font-size: 12px;
    line-height: 12px;
    padding-bottom: 5px;
    color: var(--t-muted-color);
    width: 100%;
    font-weight: 400;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  .item-time {
    font-size: 12px;
    line-height: 12px;
    font-weight: 300;
    color: var(--t-light-color);
  }
}

.rank-aside-nav {
  padding: 0 10px 10px;
  margin-bottom: 20px;
  // box-shadow: var(--t-modal-shadow);
  // background: var(--box-background);
  border-radius: var(--border-radius);
}

.skeleton-title {
  width: 50%;
  height: 24px;
}

.skeleton-desc-text {
  line-height: 22px;
  margin: 8px 0 0;
}
</style>
  